<template>
  <div class="cart-page" :class="{'no-tip': this.areaList.size <= 1}">
    <v-title title="购物车" />
    <loading :show="loading" />
    <div
      class="edit"
      :class="{'active': edit}"
      @click="edit = !edit"
      v-if="list.length > 0"
    >{{ edit ? '完成': '编辑' }}</div>
    <v-footer
      @changeAllSelected="changeAllSelected"
      @delete="deleteCart"
      @clear="clearCart"
      :total="{ allSelected, totalQuantity, totalPrice }"
      :edit="edit"
      v-if="list.length > 0"
      @toOrder="toOrder"
    />
    <tip v-if="this.areaList.size > 1" />
    <list :products="list" @changeItemSelected="changeItemSelected" />
    <div class="cart-like" v-if="list.length === 0">
      <like />
    </div>
  </div>
</template>

<script>
import api from '@/api'
import Loading from '@/components/Loading'
import Footer from './components/Footer'
import List from './components/List'
import Tip from './components/Tip'
import Title from '@/components/Title'
import Like from '@/views/product/components/Like'
import base64 from '@/util/base64'
export default {
  name: 'Cart',
  components: {
    'v-title': Title,
    Like,
    'v-footer': Footer,
    List,
    Tip,
    Loading
  },
  computed: {
    // all selected
    allSelected() {
      return this.list.every(x => x.selected)
    },
    // total quantity
    totalQuantity() {
      const selected = this.list.filter(x => x.selected)
      let total = 0
      selected.forEach(x => {
        total += +x.quantity
      })
      return +total
    },
    // total price
    totalPrice() {
      const selected = this.list.filter(x => x.selected)
      let price = 0
      selected.forEach(x => {
        price += +x.quantity * x.product.price
      })
      return +price
    },
    areaList() {
      const list = this.list.filter(x => x.selected).map(x => x.areaName)
      return new Set([...list])
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      edit: false
    }
  },
  methods: {
    getList() {
      this.loading = true
      api.Cart.list().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list = data
        // selected
        this.list.forEach(x => {
          this.$set(x, 'selected', +x.selected !== 0)
          // area
          const area = (x.product.area && x.product.area[0] && x.product.area[0].name && x.product.area[0].name.name) || ''
          this.$set(x, 'areaName', area)
        })
      }).finally(() => {
        this.loading = false
      })
    },
    changeItemSelected(item) {
      api.Cart.itemSelected({ ...item }).then()
    },
    changeAllSelected(v) {
      this.list.forEach(x => {
        this.$set(x, 'selected', v)
      })
      api.Cart.allSelected({ selected: v }).then()
    },
    deleteCart() {
      api.Cart.remove().then(() => {
        this.edit = false
        this.list = this.list.filter(x => x.selected === false)
      })
    },
    clearCart() {
      api.Cart.clear().then(() => {
        this.edit = false
        this.list = []
      })
    },
    // order
    toOrder() {
      if (this.areaList.size > 1) {
        return this.$createToast({
          type: 'error',
          txt: '不同分区商品不能同时下单',
          time: 1000
        }).show()
      }
      // go to order page
      // this.$router.push({
      //   name: 'order',
      //   params: {
      //     cart: true
      //   }
      // })
      this.$router.replace({
        name: 'order',
        params: {
          cart: true
        }
      })
    }
  },
  created () {
    this.getList()
  },
  watch: {
    list: {
      handler(v) {
        this.$store.dispatch('ExecCart/set_change_list', v).then()
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="stylus">
.cart-page
  padding-top 80px
  &.no-tip
    padding-top 45px
  .edit
    width 60px
    height 25px
    line-height 25px
    color $second_text_color
    position fixed
    right 10px
    top 10px
    z-index 999
    font-size 16px
    &.active
      color red
  .cart-like
    padding-bottom 50px
</style>
